import { log } from 'console'
import {FC,useEffect, useState} from 'react'

//一个useEffect可以当成componentDidMount componentDidUpdate componentWillUnmount

const UseEffectBase: FC<any> = ()=>{

    let [count,setCount] = useState<number>(0)

    //useEffect 副作用钩子 比如说 异步请求 操作dom可以称之为副作用 把这些逻辑放到副作用函数Effect里面
    //useEffect会在dom加载之后执行
    useEffect(()=>{
        document.title = `你修改了${count}次`
        console.log(document.getElementById('l'));//null
        return ()=>{
            console.log('777777');
            
            //返回的函数会在组件卸载的时候执行
            document.title = '组件卸载了'
        }
    })

    // console.log(document.getElementById('l'));//null    

    const handleClick = ()=>{
       setCount(count + 1)
    }

    return(
        <fieldset>
            <legend id='l' >基本使用</legend>
            <button onClick={handleClick} >点击修改标题</button>
        </fieldset>
    )
}

export default UseEffectBase